<template>
  <div class="title">
    <p>欢迎登录</p>
  </div>
  <van-form>
    <van-field class="formOperation" v-model="formData.mobile" name="手机号" placeholder="请输入手机号码" />

    <van-row justify="space-between" class='tips'>
      <van-col span="24">未注册的手机号验证后将自动注册</van-col>

    </van-row>
    <van-checkbox v-model="formData.checked" checked-color="#37dc6d" class="policy">
      <div class="isAggressDiv">
        我已阅读并同意
        <span @click="openAgreement(1)">《用户协议》</span>
        <span @click="openAgreement(2)">《隐私政策》</span>
      </div>
    </van-checkbox>
    <van-button type="primary" class="block_gradual" :loading="formData.loading" native-type="submit"
      @click="getImgcode">获取短信验证码</van-button>
    <van-button type="primary" class="block_btn" to="/login">账号密码登录</van-button>

  </van-form>
  <privacy-policy :agreementData="agreementData" />
  <Vercode ref="code" :phone="formData" />
  <!-- 图像验证码 -->
  <div v-if="formData.imgcodeShow" class="imgcode">
    <div class="warp">
      <van-icon name="close" @click="close" class='close' />
      <h1>请输入图像验证码</h1>
      <div class="flex">
        <img :src="formData.img" alt="">
        <van-cell-group inset>
          <van-field v-model="formData.imgcode" required placeholder="请输入验证码" />
        </van-cell-group>
      </div>
      <van-button type="primary" class="block_gradual" :loading="formData.loading" @click="GetCode">确定</van-button>
    </div>
  </div>
</template>
<script>
import { defineComponent, reactive, computed, onMounted, ref } from 'vue'
import { Toast } from "vant";
import { useRouter } from 'vue-router'
import { setLocal } from "@/utils/localStorage";
import { loginByPassword } from "@/api/user";
import privacyPolicy from '@/components/privacyPolicy'
import { getCode, imgcode, loginByPhone } from "@/api/user";
import Vercode from "@/components/vercode.vue";
import { processDev } from '@/utils/env'
export default defineComponent({
  components: {
    privacyPolicy,
    Vercode
  },
  setup() {
    const router = useRouter()
    const formData = reactive({
      mobile: "",
      password: "",
      checked: true,
      counter: "",
      sendBtnText: "60秒后获取验证码",
      passwordType: "password",
      loading: false,
      imgcodeShow: false,
      imgcode: '',
      img: '',
      uuid: ''

    })
    const close = () => {
      formData.imgcodeShow = false
    }

    const agreementData = reactive({
      status: false,
      type: 1
    })
    const openAgreement = (type) => {
      agreementData.status = true
      agreementData.type = type
    }
    const getImgcode = () => {
      formData.imgcode = ""
      if (!formData.checked) {
        Toast("请勾选我已阅读并同意《用户协议》《隐私政策》");
        return
      } else if (!formData.mobile) {
        Toast("请输入手机号！");
        return
      }
      imgcode().then(res => {
        console.log(res)
        if (res.data.success) {
          formData.imgcodeShow = true
          formData.img = res.data.data.img
          formData.uuid = res.data.data.uuid
        } else {
          formData.imgcodeShow = false
          Toast.fail(res.data.message);
        }

      })
    }
    const GetCode = () => {
      const data = { mobile: formData.mobile, type: 6, uuid: formData.uuid, verificationCode: formData.imgcode }
      Toast.loading({
        duration: 0,
        forbidClick: true
      });
      getCode(data).then(res => {
        if (!res.data.success) {
          getImgcode()
          console.log(res.data.message)
          Toast.fail(res.data.message);
        } else {
          formData.imgcodeShow = false
          code.value.Codeopen = true
          Toast.clear();
          formData.counter = 60
          formData.sendBtnText = `(${formData.counter}秒)后重新发送`
          const timer = setInterval(() => {
            formData.counter--
            formData.sendBtnText = `(${formData.counter}秒)后重新发送`
            if (formData.counter <= 0) {
              formData.sendBtnText = "返回重新获取验证码"
              clearInterval(timer)
            }
          }, 1000)
        }
      })
    }
    const code = ref(null)
    const onSubmit = () => {
      //   localStorage.setItem('phone', formData.mobile)


      //   code.value.Codeopen = true
      //   formData.loading = true
    }
    const isApp = computed(() => {
      return processDev
    })

    return {
      code,
      formData,
      onSubmit,
      GetCode,
      getImgcode,
      close,
      openAgreement, agreementData
    }
  },
})
</script> 
<style lang="less" scoped>
.imgcode {
  width: 100%;
  background: rgba(0, 0, 0, 0.8);
  height: 80vh;
  position: fixed;
  top: 0;
  left: 0%;
  padding-top: 4rem;

  .block_gradual {
    margin: 0.6rem 0px;
  }

  h1 {
    font-size: 36px;
    text-align: center;
  }

  .warp {
    &:deep(.van-field) {
      background: transparent;
    }

    margin: 0px 30px;
    position: relative;
    background: white;
    padding: 5%;
    border-radius: 8px;

    .close {
      position: absolute;
      font-size: 0.7rem;
      right: 3%;
      top: 3%;
    }

    .flex {
      margin-top: 0.5rem;
      display: flex;

      &:deep(.van-field) {
        border: solid 1px #8c8a8a;
        border-radius: 4px;
      }

      &:deep(.van-field__control) {
        font-size: 26px;
        color: #000000;
      }
    }
  }
}

.tips {
  font-size: 28px;
  font-family: Source Han Sans CN;
  font-weight: 400;
  color: #ffffff;
  line-height: 48px;
  text-align: center;
}

.title {
  font-size: 36px;
  color: #ffffff;
  line-height: 48px;
  margin: 40px 60px 0px;
}

.policy {
  position: fixed;
  bottom: 50px;
  display: flex;
  align-items: center;

  &:deep(.van-checkbox__icon) {
    width: 24px;
    height: 24px;
    font-size: 24px !important;
    line-height: 40px;
    margin-block: 5px;
  }

  .van-checkbox {
    margin-top: 60px;
  }
}

.block_gradual {
  margin-top: 150px !important;
}

&:deep(.van-field) {
  margin-bottom: 10px;
}

.block_btn {
  display: block;
  margin: 0 auto;
  background: transparent;
  border: none;
  font-size: 28px;
  font-family: Source Han Sans CN;
  font-weight: 400;
  color: #ffffff;
  opacity: 0.6;
  text-align: center;
}

.isAggressDiv {
  font-size: 28px;
  font-weight: 400;
  color: #ffffff;
  opacity: 0.6;

  span {
    font-size: 28px;
    font-family: Source Han Sans CN;
    font-weight: 400;
    color: #37dc6d;
    background: linear-gradient(-90deg, #37dc6d 0%, #34d1f9 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
  }
}

&:deep(.van-field) {}

.foreget-wrap {
  display: flex;
  justify-content: flex-end;
  margin: 0.5rem 0px;
  color: #ffffff;

  span {
    display: flex;
  }
}

.van-form {
  margin-top: 60px;
  padding: 0 60px;

  .van-row {
    font-size: 28px;
    font-weight: 400;
    color: #ffffff;
    line-height: 48px;
  }
}
</style>